<template>
  <view>
    <u-sticky bgColor="#fff">
      <u-tabs
        lineWidth="30"
        lineColor="#f56c6c"
        :list="list1"
        @click="click"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)'
        }"
        :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)'
        }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
      ></u-tabs>
    </u-sticky>
    <view class="wriper">
      <div class="main_none" v-if="isShow">
        <image src="../../static/不存在@2x.png"></image>
        <div class="info">无待提货物</div>
      </div>
      <view class="main_has" v-for="(item, index) in list" :key="index">
        <view class="task_number">
          <text>任务编号:{{item.id}}</text>
          <u-tag text="已延迟" plain shape="circle" size="mini" type="error"></u-tag>
        </view>
        <view class="start_stop">
          <u-line color="#ccc" direction="col" dashed length="30%"></u-line>
          <view class="start">
            <view class="left">起</view>
            <view class="right">{{item.startAddress}}</view>
          </view>
          <view class="stop">
            <view class="left">止</view>
            <view class="right">{{item.endAddress}}</view>
          </view>
        </view>
        <view class="Pick-up_time">
          <view class="left">
            <view class="title">提货时间</view>
            <view class="time">{{item.created}}</view>
          </view>
          <button size="mini">提货</button>
        </view>
      </view>
    </view>
    <!-- <navigator url="../login/login"> <button>到登录页</button></navigator> -->
  </view>
</template>

<script>
export default {
  name: 'Index',
  components: {},
  data() {
    return {
      // 假数据 后面删除
      list: [],
      list1: [
        {
          name: '待提货'
        },
        {
          name: '在途'
        },
        {
          name: '已完成'
        }
      ],
      scrollable: 'false',
      isShow: false,
      status:1,
      page:1,
      pageSize:10
    };
  },
  created() {},
  mounted() {},
  async onLoad() {
    let res = await uni.$http.get('/tasks/list',{
        status:this.status,
        page:this.page,
        pageSize:this.pageSize
      })
    console.log(res);
    if(res.statusCode==200) {
      this.list=(res.data.data.items)
    }
    console.log(this.list);
  },
  methods: {
    click(item) {
      console.log('item', item);
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}
.main_none {
  height: 636.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  image {
    width: 200px;
    height: 120px;
  }
  .info {
    margin-top: 20px;
    color: #818181ff;
    font-size: 16px;
  }
}

.main_has {
  background-color: #fff;
  margin: 0 auto;
  padding: 15px 17px 18.5px 19.5px;
  margin: 13px;
  .task_number {
    display: flex;
    justify-content: space-between;
    > text {
      font-weight: 600;
      color: #2a2929ff;
      height: 22px;
    }
  }
  .Pick-up_time {
    height: 54.5px;
    // background-color: pink;
  }
  .start_stop {
    height: 94.5px;
    position: relative;

    // background-color: bisque;
    // border-left: 1px dashed  #ccc;
    .u-line {
      position: absolute;
      left: 10px;
      top: 23px;
    }
    .start,
    .stop {
      display: flex;
      .left {
        width: 22px;
        height: 22px;
        line-height: 22px;
        border-radius: 11px;
        background-color: #2a2929;
        font-size: 12px;
        text-align: center;
        margin-right: 11.5px;
        margin-bottom: 17px;
        color: #fff;
      }
    }
    .start {
      margin-top: 10px;
    }
    .stop {
      margin-top: 10px;
      .left {
        background-color: #ee4f3e;
      }
    }
  }
}
.Pick-up_time {
  border-top: 1px solid #ccc;
  // background-color: pink;
  display: flex;
  justify-content: space-between;
  align-items: center;
  button {
    flex: 1;
    width: 80px;
    height: 32px;
    background: #ef4f3f;
    border-radius: 16px;
    color: #fff;
    margin-right: 17px;
  }
  .left {
    flex: 5;
    color: #818181;

    .time {
      margin-top: 4px;
    }
  }
}
</style>
